<template>
	<view class="user-page">
		<CustomHeader title="我的" />
		<div class="user-info wrap" :style="{'padding-top': paddingTop + 'px'}">
			<div class="left">
				<div class="avatar">
					<image v-if="user && user.identity == 1" :src="user.header" mode=""></image>
					<image v-else :src="user && user.company_header || require('../../static/image/avatar.png')"
						mode=""></image>
				</div>
				<div class="user-name">
					<span>{{user.nickname || user.company}}</span>
					<p>{{user.current_job_name}}</p>
				</div>

			</div>
			<span @click='goEdit' class="edit">编辑></span>
		</div>
		<div class="list wrap">
			<template v-for="(item,index) in navs">
				<li :key="index" v-if="handleIdentity(item)" @click="() => onPath(item)">
					<template v-if="item.path == 'phone'">
						<button open-type="contact">联系客服</button>
					</template>
					<template v-else>
						<span>{{item.name}}</span>
						<image v-if="handlePath(item.path)" src="../../static/image/arrow.png" mode=""></image>
					</template>

				</li>
			</template>

			<SSButton @click="onClickLogout" class="quit-btn" title="退出登录" />
		</div>


		<Tabbar :activePath="user && user.identity ==1 ? '2' : '4'" />
	</view>
</template>

<script>
	import Tabbar from '@/components/custom-tabbar.vue'
	import SSButton from '@/components/Button.vue'
	import CustomHeader from '@/components/custom-header.vue'
	export default {
		components: {
			Tabbar,
			SSButton,
			CustomHeader
		},
		data() {
			return {
				navs: [
					// 个人
					{
						name: '投递记录',
						path: '/pages/user/deliveryRecord/index',
						identity: 1
					},
					{
						name: '在线简历',
						path: '/pages/user/onlineResume/index',
						identity: 1
					},
					{
						name: '身份认证',
						path: '/pages/user/certification/index?type=1',
						identity: 1
					},
					// 企业
					{
						name: '已发布职位',
						path: '/pages/user/release/index',
						identity: 2
					},
					{
						name: '资质认证',
						path: '/pages/user/certification/index?type=2',
						identity: 2
					},


					{
						name: '联系我们',
						path: 'phone'
					},
					{
						name: '关于我们',
						path: '/pages/user/aboutUs/index',
					},
					{
						name: '意见反馈',
						path: '/pages/user/feedback/index',
					},
				],
				user: null,

				clearStorageTime: Math.random() * 1000,
				paddingTop: 0,
			};
		},
		created() {
			wx.hideHomeButton()
			this.paddingTop = getApp().globalData.navHeight
		},
		onShow() {
			this.getUserInfo()

		},
		computed: {
			// 是否是链接 
			handlePath() {
				return (value) => value && value.indexOf('/pages') >= 0
			},
			handleIdentity() {
				return item => item.identity == (this.user && this.user.identity) || !item.identity
			}
		},
		methods: {
			async getUserInfo() {
				const data = await this.$http.User.getUser()
				this.user = data
			},
			async onClickLogout() {

				const {
					code
				} = await this.$http.User.logout()
				if (code !== 200) return false
				uni.reLaunch({
					url: '/pages/login/index'
				})
				let promise = uni.$TUIKit.logout()
				promise.then(res => {
					console.log(res)
				}).catch(function(imError) {
					console.warn('logout error:', imError);
				});


			},
			goEdit() {
				if (this.user.identity == 2 && this.user.is_auth == 0) {
					uni.navigateTo({
						url: '/pages/user/certification/index?type=2'
					})
					return false
				}

				uni.navigateTo({
					url: `/pages/user/${this.user.identity == 1 ? 'editUser': 'editCompanyUser'}/index`
				})
			},
			onPath({
				path
			}) {
				console.log(path.indexOf('certification' >= 0))
				if (path.indexOf('certification') >= 0 && this.user.is_auth == 1) {
					return uni.showToast({
						title: "已认证",
						icon: 'none'
					})
				}
				if (path && path.indexOf('/pages') >= 0) {
					uni.navigateTo({
						url: path
					})
					return false
				}


				// if (path === 'phone') {
				// 	uni.makePhoneCall({
				// 		phoneNumber: ''
				// 	})
				// }

			}
		}
	}
</script>

<style lang="less" scoped>
	.user-page {
		.wrap {
			padding: 32upx;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
		}

		.user-info {
			margin-top: 18upx;
			display: flex;
			align-items: center;

			.left {
				flex: 1;
				display: flex;
				align-items: center;

				.avatar {
					width: 128upx;
					height: 128upx;
					margin-right: 40upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 128upx;
					}
				}

				.user-name {
					display: flex;
					flex-direction: column;

					span {
						font-size: 28upx;
						line-height: 64upx;
						color: #28211F;
						font-weight: 600;
					}

					p {
						font-size: 28upx;
						line-height: 28upx;
						margin-top: 6upx;
						color: #666E7A;
						font-weight: 400;
					}
				}
			}

			.edit {
				color: #2AABE2;
				font-size: 20upx;
				font-weight: 400;
			}
		}

		.list {
			margin-top: 20upx;

			padding-top: 0;
			padding-bottom: 92upx;

			li {
				display: flex;
				align-items: center;
				padding-top: 30upx;
				padding-bottom: 20upx;
				border-bottom: 1px solid #EEEEEE;

				&:last-of-type {
					border-bottom: unset;
				}
				
				button {
					background: transparent;
					border: unset;
					color: #28211F;
					font-size: 24upx;
					padding: 0%;
					margin: 0%;
					width: 100%;
					line-height: 24upx;
					text-align: left;
					border-radius: unset;
					&::after {
						border: unset;
					}
				}

				span {
					color: #28211F;
					font-size: 24upx;
					font-weight: 400;
					flex: 1;
				}

				image {
					width: 36upx;
					height: 36upx;
				}
			}

			/deep/ .quit-btn {

				.global-button {
					width: unset;
					margin-top: 130upx;

				}
			}
		}
	}
</style>
